<template>
      <div class="header">
        <van-nav-bar
        title="时间表"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      </div>

      <div class="menu">
      <van-tabs v-model:active="activeName">
        <van-tab :title="`${item.date}/${item.day_of_week}`" :name="index" v-for="(item, index) in timeLineList" :key="item.date">
          <div class="ani" v-for="ani in item.episodes" :key="ani.episode_id" @click="toWatch(ani.season_id)">
            <div class="left">
              <div class="time">{{ani.pub_time}}</div>
              <img :src="ani.square_cover" alt="">
            </div>
            <div class="right">
              <div class="aniTitle">{{ani.title}}</div>
              <div class="pub_index">{{ani.pub_index ? ani.pub_index : ani.delay_reason}}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script setup>
import { onMounted, ref } from "@vue/runtime-core";
import { getTimeLine } from '@/api'

const timeLineList = ref([])
const activeName = ref(1);
// const date = ref('')

 const onClickLeft = () => history.back();
 const toWatch = (id) => {
  window.open(`https://www.bilibili.com/bangumi/play/ss${id}`, '_blank');
 }
onMounted(() => {
  getTimeLine().then(res => {
    console.log(res.result.timeline);
    timeLineList.value = res.result.timeline
  })
})
</script>

<style scoped>
.ani{
  display: flex;
  margin-top: 10px;
}
.left{
 display: flex;
}
.left .time{
  margin-right: 10px;
}
.left img{
  width: 60px;
  height: 60px;
}
.right{
  margin-left: 20px;
}
.pub_index{
  margin-top: 8px;
  font-size: 14px;
  color: rgb(218, 55, 82);
}
</style>